<script lang="ts">
  import Itinerary from '$lib/Itinerary.svelte';
  import type { Itinerary as ItineraryType } from '$lib/motis-types';
  import Page from '$lib/Page.svelte';
  import { page } from '$app/state';
  import { normalisePlaceName } from '$lib/aliases';
  import Titlebar from '$lib/Titlebar.svelte';
  import { S } from '$lib';

  import _itinerary from './sampleData.json';
  import Loader from '$lib/Loader.svelte';
  import LineGlyph from '$lib/assets/LineGlyph.svelte';
  let itinerary = $state(_itinerary as unknown as ItineraryType | null);

  let fromName = $derived(
    itinerary ? normalisePlaceName(itinerary.legs[0].from.name) : ''
  );
  let toName = $derived(
    itinerary
      ? normalisePlaceName(itinerary.legs[itinerary.legs.length - 1].to.name)
      : ''
  );
  let routeShortName = $derived(itinerary?.legs?.[0]?.routeShortName);

  let title = $derived(
    itinerary
      ? `${routeShortName ? `${routeShortName} from ` : ''}${fromName} to ${toName}`
      : 'Route ' + page.params.id
  );
</script>

<svelte:head>
  <meta name="route:id" content={page.params.id} />
</svelte:head>

<Page title={`${title} - Fahrplan`} class="p-8">
  <div class={S.window_content_fullscreen}>
    <Titlebar>
      <div class="w-full">
        <!-- FIXME: I'm not sure I'm satisfied with the design of this part -->
        <div
          class="{S.title} rounded-xl w-full text-center flex items-center justify-between gap-2"
        >
          <LineGlyph
            currentColor="#fff"
            kind={routeShortName}
            negative={false}
            dark
          />
          <p class="inline cursor-default">
            <span class="font-medium">
              {fromName}
            </span>
            <span class="font-[450]"> to </span>
            <span class="font-medium">
              {toName}
            </span>
          </p>
          <div class="opacity-0 pointer-events-none" aria-hidden="true">
            <!-- make it properly centered -->
            <LineGlyph
              currentColor="#fff"
              kind={routeShortName}
              negative={false}
              dark
            />
          </div>
        </div>
        <!-- <div
          class="h-1 mt-2 -mb-3 bg-gradient-to-b from-[#111] to-[#1110]"
        ></div> -->
      </div>
    </Titlebar>
    <div class="w-full h-[2px] rounded-[2px] relative">
      <Loader kind="hidden" />
    </div>
    <div class="p-3">
      <Itinerary {itinerary} />
    </div>
  </div>
</Page>
